<template>
  <div class="allyingyuan">
    <div class="navbar-wrap">
      <div class="Navbarold">
        <nav>
          <div class="navbar-logo">
            <a class="navbar-back" href="javascript:history.back();"></a>
          </div>
          <div class="navbar-title">猫眼电影</div>
          <div class="navbar-button"></div>
        </nav>
      </div>
    </div>
    <CineMa v-for="item in yingyuans" :key="item.id" :item="item"/>
  </div>
</template>

<script>
// 引入部分电影数据
import CineMa from "@/components/CineMa.vue";
// 引入VueX
import { mapState } from "vuex";

export default {
  components: {
    CineMa,
  },
  props: ["yingyuans"],
  computed: {
    ...mapState(["lie"]),
  },
};
</script>

<style lang="less" scoped>
.allyingyuan {
    position: absolute;
    background: white;
    top: 0;
    left: 0;
    z-index: 8;
  .maoyan {
    padding: 6px;
    background-color: #e54847;
    height: 38px;
    width: 363px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .maoyan-l {
      width: 100px;
      height: 38px;
      img {
        margin-top: 10px;
        width: 21px;
        height: 21px;
      }
    }

    .maoyan-c {
      font-size: 18px;
      color: #fff;
      width: 163px;
      height: 38px;
      text-align: center;
      line-height: 38px;
    }

    .maoyan-r {
      width: 100px;
      height: 38px;
      text-align: right;

      img {
        margin-top: 10px;
        width: 17px;
        height: 16px;
      }
    }

    .lieb {
      position: fixed;
      top: 45px;
      right: 15px;
      background: white;
      width: 110px;
      z-index: 24;
      box-shadow: 0 0.06rem 0.18rem 0 rgb(0 0 0 / 10%);

      ul {
        li {
          font-size: 15px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          border-bottom: 1px solid #e6e6e6;
        }
      }
    }
  }
}
</style>